const { message } = antd; // 第三方库用于消息提示
window.onload = async () => {
    const env = {
        serviceUrl: "https://vjmap.com/server/api/v1",
        accessToken: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJJRCI6MiwiVXNlcm5hbWUiOiJhZG1pbjEiLCJOaWNrTmFtZSI6ImFkbWluMSIsIkF1dGhvcml0eUlkIjoiYWRtaW4iLCJCdWZmZXJUaW1lIjo4NjQwMCwiZXhwIjo0ODEzMjY3NjM3LCJpc3MiOiJ2am1hcCIsIm5iZiI6MTY1OTY2NjYzN30.cDXCH2ElTzU2sQU36SNHWoTYTAc4wEkVIXmBAIzWh6M",
        exampleMapId: "sys_zp",
        assetsPath: "../../assets/",
        ...__env__ // 如果您已私有化部署，需要连接已部署的服务器地址和token，请打开js/env.js,修改里面的参数
    };
    try {
        // 在线效果查看地址: https://vjmap.com/demo/#/demo/map/threelayer/threeLayerModelGlb
        // --threejs加载GLB模型--
        // 地图服务对象
        let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
        // 打开地图
        let res = await svc.openMap({
            mapid: env.exampleMapId, // 地图ID
            mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
            style: vjmap.openMapDarkStyle() // div为深色背景颜色时，这里也传深色背景样式
        })
        if (res.error) {
            // 如果打开出错
            message.error(res.error)
        }
        // 获取地图范围
        let mapExtent = vjmap.GeoBounds.fromString(res.bounds);
        // 根据地图范围建立几何投影坐标系
        let prj = new vjmap.GeoProjection(mapExtent);
        
        // 地图对象
        let map = new vjmap.Map({
            container: 'map', // DIV容器ID
            style: svc.rasterStyle(), // 样式，这里是栅格样式
            center: prj.toLngLat(mapExtent.center()),
            zoom: 3,
            pitch: 60,
            antialias:true,
            renderWorldCopies: false // 不显示多屏地图
        });
        
        // 关联服务对象和投影对象
        map.attach(svc, prj);
        // 根据地图本身范围缩放地图至全图显示
        //map.fitMapBounds();
        await map.onLoad();
        
        const mapBounds = map.getGeoBounds();
        const center = map.getCenter();
        
        if (typeof vjThree !== "object") {
            // 如果没有环境
            await vjmap.addScript([{
                src: "../../js/plugins/vjthree.min.js"
            },{
                src: "../../js/plugins/vjthree.min.css"
            }])
        }
        
        const threeContext = map.createThreeJsContext({
            defaultLights: true,
            enableSelectingObjects: true // 将此更改为 false 以禁用 3D 对象选择
        });
        
        let modelSize = 1.8 // soldier.glb 的模型大小是 1.8
        let modelMapLength = mapBounds.width() / 10; // 假设模型放大地图上为地图长度的10分之一大小
        // 计算需要缩放的比例
        let scale = map.getMapProjection().toMeter(modelMapLength) / modelSize;
        
        const options = {
            obj: env.assetsPath + 'data/soldier.glb',
            type: 'gltf',
            scale: scale,
            units: 'meters',
            rotation: { x: 90, y: 0, z: 0 }, //default rotation
            anchor: 'center'
        }
        
        // 文档 https://vjmap.com/guide/threejs.html
        threeContext.loadObj(options, function (model) {
            let soldier = model.setCoords([center.lng, center.lat, 0]);
            threeContext.add(soldier);
        
            soldier.addEventListener('SelectedChange', e => console.log(e), false);
            soldier.addEventListener('Wireframed', e => console.log(e), false);
            soldier.addEventListener('IsPlayingChanged', e => console.log(e), false);
            soldier.addEventListener('ObjectDragged', e => console.log(e), false);
            soldier.addEventListener('ObjectMouseOver', e => console.log(e), false);
            soldier.addEventListener('ObjectMouseOut', e => console.log(e), false);
        
        
            // 后面修改大小角度
            setTimeout(() => {
                let scale = soldier.scale.x * 2
                soldier.set({ scale: [scale, scale, scale] , rotation: [10, 10, 10] });
        
                // 修改坐标
                let lnglat = map.toLngLat([587727221.6345291,3103853143.0935783]) // cad坐标
                //soldier.set({ position: [lnglat[0], lnglat[1], 0] });
                 //soldier.setCoords([lnglat[0], lnglat[1], 0] )
            }, 3000)
        })
        map.addLayer(new vjmap.ThreeLayer({context: threeContext}));
        
        
        
    }
    catch (e) {
        console.error(e);
        message.error({
            content: "catch error: " + (e.message || e.response || JSON.stringify(e).substr(0, 80)),
            duration: 60,
            key: "err"
        });
    }
};